(function($) {
	
	var fancyGraphics = $('.fancyGraphic');
	var textPadding = 10;
	var binary_sets = [
		['01000001 01001001', '00100110 01001101', '01001100'],
		['01000111 01010101', '01001001 01000100', '01000101'],
		['01010100 01000101', '01000001 01001101' ]
	];
	var mobile_width = 998;
	var window_width = $(window).width();
	
	if (window_width > mobile_width) {
	
		window.addEventListener('load', function () {
			// Create binary code
			$(fancyGraphics).each(function(){
				var this_graphic = $(this),
					greenDots_wrapper = $(this_graphic).find('#green-dots'),
					greenDots = $(greenDots_wrapper).children('g'),
					main_svg = $(this_graphic).children('svg'),
					main_svg_viewbox = main_svg[0].getAttribute('viewBox');
					
				// Pick out a random binary set to use
				var this_binary_set = binary_sets[Math.floor(Math.random() * binary_sets.length)];
				var count = 0;
				
				// For each green dot present, find the binary to match
				$(greenDots).each(function(){
					var this_index = $(this).attr('id').replace('dot-', ''),
						this_binary = document.getElementById('binary-' + this_index),
						flip_line = $(this_binary).data('flip-line'),
						bBoxDot = this.getBBox(),
						bBoxBinary = this_binary.getBBox();
					
					// Swap out binary placeholder text to part of the sets
					gsap.to(this_binary, {duration: 1, scrambleText: this_binary_set[count]});
					
					// Create the line connecting the binary to the graphic
					var dot_position = {x: bBoxDot.x + (bBoxDot.width / 2), y: bBoxDot.y + (bBoxDot.height / 2)};
					var binary_position = {x: bBoxBinary.x - textPadding, y: bBoxBinary.y + (bBoxBinary.height / 2)};
					
					
					if (flip_line) {
						binary_position.x = bBoxBinary.x  + bBoxBinary.width + textPadding;
					}
					
	
					var connecting_str = $('<svg viewbox="' + main_svg_viewbox + '" class="fancyGraphic__line__wrapper"><polyline class="fancyGraphic__line" id="line-' + this_index + '" points="' + dot_position.x + ', ' + dot_position.y + ', ' + binary_position.x + ', ' + binary_position.y + '" /></svg>');
					$(connecting_str).prependTo(this_graphic);
					
					if (count >= this_binary_set.length) {
						count = 0;
					} else {
						count++;
					}
					
				});
				
			});
			
			
		});
		
		
		// Swap out binary code in intervals
		
		setInterval(function(){
			$(".fancyGraphic__container").each(function(){
				// Pick out a random binary set to use
				var this_binary_set = binary_sets[Math.floor(Math.random() * binary_sets.length)];
				var count = 0;
				
				// Loop through binaries in the graphic and assign new text
				var binaries = $(this).find('.fancyGraphic__binary');
				
				$(binaries).each(function(){
					var current_text = $(this).text();
					var tl = gsap.timeline({repeat: 0});
				
					tl.to($(this), {duration: 1, scrambleText: { text: ' ', chars: current_text } });
					tl.to($(this), {duration: 1, scrambleText: { text: this_binary_set[count], chars: ' ' } });
					
					if (count >= this_binary_set.length - 1) {
						count = 0;
					} else {
						count++;
					}
					
				});
				
			});
			
			
				
		}, 6000);
		
		
		
		// Parallax Movement
		var this_container, graphic, this_graphic, movement_amount, svg, binaries, binary_movement, this_index, this_dot, dot_position, bBoxDot, polyline, this_graphic_left, this_graphic_top, svg_main;
		
		$(".fancyGraphic__container").mousemove(function(e) {
			this_container = $(this);
			graphic = $(this_container).find('.fancyGraphic');
			
			$(graphic).each(function(){
				this_graphic = $(this);
				movement_amount = $(this_graphic).data('movement');
				svg = $(this_graphic).find('svg');
				svg_main = $(svg).find('#graphic');
				binaries = $(this_graphic).find('.fancyGraphic__binary');
				binary_movement = -movement_amount;
				
				// Parallax the main graphic itself
				parallaxIt(e, svg_main, movement_amount, $(this_container));
				
				this_graphic_left = gsap.getProperty(svg_main[0], "x");
				this_graphic_top = gsap.getProperty(svg_main[0], "y");
				
				
				// Adjust the connecting line
				$(binaries).each(function(){
					this_index = $(this).attr('id').replace('binary-', '');
					this_dot = document.getElementById('dot-' + this_index);
					
					bBoxDot = this_dot.getBBox();
					binary_movement += 50;
					
					polyline= document.getElementById('line-' + this_index);
					
					if (polyline == undefined) return true;
					
					dot_position = {x: bBoxDot.x + this_graphic_left + (bBoxDot.width / 2), y: bBoxDot.y + this_graphic_top + (bBoxDot.height / 2)};
					
					const points = polyline.getAttribute("points").match(/[\d\.]+/g).map(Number);
					
					gsap.to(polyline, {duration: 1, morphSVG: dot_position.x + " " + dot_position.y  + "," + points[2] + " " + points[3]});
					
				});
				
			});
			
			// Additional parallax for misc elements
			var parallaxElements = $('.parallaxElement--30');
			$(parallaxElements).each(function(){
				if ($(this).hasClass('parallaxElement--30')) {
					parallaxIt(e, $(this), -30, $(this_container));
				}
			});
	
		});
	
	
		// Additional parallax for homepage background
		$('.homeTop').mousemove(function(e) {
			parallaxIt(e, $('.homeTop__background'), -80, $('.homeTop'));
			
		});
	
	
		
	}

	  
	function parallaxIt(e, target, movement, container) {
		var relX = e.pageX - container.offset().left;
		var relY = e.pageY - container.offset().top;
	  
		gsap.to(target, 1, {
		  x: (relX - container.width() / 2) / container.width() * movement,
		  y: (relY - container.height() / 2) / container.height() * movement
		});
	}
	
})( jQuery );